<template>
  <div class="c-footer">
    <div class="f1 d-flex">
      <div @click="zan" class="footer-zan" :class="{active:isLike}">
        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
        <span >{{ likeCount==0?'赞':likeCount }}</span>
      </div>
      <div class="footer-reply">
        <i class="el-icon-chat-square"></i>
        <span @click="$emit('replyClicked')"><slot></slot></span>
      </div>
    </div>

    <el-popconfirm  v-if="isShowDel" title="确定要删除评论么？" @confirm="delComment">
      <el-link
        slot="reference"
        class="del"
        type="regular"
        icon="el-icon-delete"
        >删除</el-link
      >
    </el-popconfirm>
  </div>
</template>

<script>
import commentApi from "@/axios/commentApi";
import CommentInput from "./CommentInput.vue";
export default {
  props: ["comment", "post"],
  components: { CommentInput },
  data() {
    return {
      isLike:this.comment.isLike,
      likeCount:this.comment.likeCount
    }
  },
  
  computed: {
    isShowDel() {
      return (
        this.comment.author.username == this.userInfo.username ||
        this.post.author.username == this.userInfo.username
      );
    } 
  },
  methods: {
    delComment() {
      commentApi
        .deleteById(this.comment.commentId)
        .then(({ data }) => {
          if (data.code == this.$status.SUCCESS_CODE) {
            return this.deleteCommentById(this.comment.commentId);
          } else this.$message.error("删除失败");
        })
        .catch((e) => {
          console.error(e);
          this.$message.error("删除失败");
        });
    },
    zan() {
    
      if(!this.isLike) {
        commentApi.like(this.comment.commentId)
        .then(({data})=> {
          if(data.code == this.$status.SUCCESS_CODE){
            this.$message.success('点赞成功')
            this.likeCount++
            this.isLike  = !this.isLike
          }
          else 
          this.$message.success('点赞失败')
        })
        .catch(e=>{
          console.error(e);
          this.$message.error('点赞失败')
        })
      } else {
        commentApi.cancelLike(this.comment.commentId)
        .then(({data})=> {
          if(data.code == this.$status.SUCCESS_CODE){
            this.$message.success('取消点赞成功')
            this.likeCount--
            this.isLike  = !this.isLike
          }
          else 
          this.$message.success('取消点赞失败')
        })
        .catch(e=>{
          console.error(e);
          this.$message.error('取消点赞失败')
        })
      }
    }
  },
};
</script>

<style scoped lang="less">
.c-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  color: var(--text-regular);
  font-size: 15px;
  .f1 > * > span {
    margin-left: 4px;
  }
  .f1 > * {
    cursor: pointer;
  }
  .f1 > *:hover {
    color: var(--text-primary);
  }
  .footer-reply {
    margin-left: 20px;
  }
  .footer-zan {
    line-height: 20px;
    &.active {
      color: var(--text-primary);
    }
  }
   
}
</style>